<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:1200rpx;"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	let gPaint = new facecat.FCPaint();
	
    /*
    * 点击方法
    * view:视图
    * firstTouch:是否第一次触摸
    * firstPoint:第一次触摸的坐标
    * secondTouch:是否第二次触摸
    * secondPoint:第二次触摸的坐标
    * clicks:点击次数
    */
    let onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
        facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
	};

	/*
	* 鼠标按下实现方法
	* view:视图
	* mp:坐标
	* button:按钮
	* clicks:点击次数
	* delta:滚轮值
	*/
	let onMouseDown = function (view, mp, buttons, clicks, delta) {
		facecat.onMouseDownDefault (view, mp, buttons, clicks, delta);
	};

	/*
	* 鼠标移动实现方法
	* view:视图
	* mp:坐标
	* button:按钮
	* clicks:点击次数
	* delta:滚轮值
	*/
	let onMouseMove = function (view, mp, buttons, clicks, delta) {
		facecat.onMouseMoveDefault(view, mp, buttons, clicks, delta);
	};

	/*
	* 鼠标滚动实现方法
	* view:视图
	* mp:坐标
	* button:按钮
	* clicks:点击次数
	* delta:滚轮值
	*/
	let onMouseWheel = function (view, mp, buttons, clicks, delta) {
		if (window.event.ctrlKey && view.paint) {
			//放大显示
			if (delta < 0) {
				view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
				view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
				//resizeAll();
				//缩小显示
			} else if (delta > 0) {
				if (view.paint.scaleFactorX > 0.2) {
					view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
					view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
					//resizeAll();
				}
			}
			return;
		}
		facecat.onMouseWheelDefault(view, mp, buttons, clicks, delta);
	};

	/*
	* 鼠标抬起实现方法
	* view:视图
	* mp:坐标
	* button:按钮
	* clicks:点击次数
	* delta:滚轮值
	*/
	let onMouseUp = function (view, mp, buttons, clicks, delta) {
		facecat.onMouseUpDefault(view, mp, buttons, clicks, delta);
	};

	/*
	* 触摸开始方法
	* view:视图
	* firstTouch:是否第一次触摸
	* firstPoint:第一次触摸的坐标
	* secondTouch:是否第二次触摸
	* secondPoint:第二次触摸的坐标
	*/
	let onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
		facecat.onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
	};

	/*
	* 触摸移动方法
	* view:视图
	* firstTouch:是否第一次触摸
	* firstPoint:第一次触摸的坐标
	* secondTouch:是否第二次触摸
	* secondPoint:第二次触摸的坐标
	*/
	let onTouchMove = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
		facecat.onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
	};

	/*
	* 触摸结束方法
	* view:视图
	* firstTouch:是否第一次触摸
	* firstPoint:第一次触摸的坐标
	* secondTouch:是否第二次触摸
	* secondPoint:第二次触摸的坐标
	*/
	let onTouchEnd = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
		facecat.onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
	};
		
	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				const canvas = document.querySelector('#myCanvas');
				gPaint.isMobile = facecat.isMobileMode();
				//注册事件
				facecat.addMouseDownEvent(canvas, gPaint, onMouseDown);
				facecat.addMouseMoveEvent(canvas, gPaint, onMouseMove);
				facecat.addMouseWheelEvent(canvas, gPaint, onMouseWheel);
				facecat.addMouseUpEvent(canvas, gPaint, onMouseUp, onClick);
				facecat.addTouchBeginEvent(canvas, gPaint, onTouchBegin);
				facecat.addTouchMoveEvent(canvas, gPaint, onTouchMove);
				facecat.addTouchEndEvent(canvas, gPaint, onTouchEnd, onClick);
				uni.createSelectorQuery().in(this).select(".facecat").boundingClientRect(data=>
				{
					this.widthEle = data.width;
					this.heightEle = data.height;
				}).exec(); 
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				/*
				* 重绘背景的实现方法
				* view:视图
				* paint:绘图对象
				* clipRect:裁剪区域
				*/
				gPaint.onPaint = function (view, paint, clipRect) {
					facecat.onPaintDefault(view, paint, clipRect);
				};
				/*
				* 重绘边框的实现方法
				* view:视图
				* paint:绘图对象
				* clipRect:裁剪区域
				*/
				gPaint.onPaintBorder = function (view, paint, clipRect) {
					facecat.onPaintBorderDefault(view, paint, clipRect);
				};
				 /*
				  * 更新布局的实现方法
				  * views:视图集合
				  */
				gPaint.updateViewCallBack = function (views) {
					facecat.updateViewDefault(views);
				}
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="utf-8"?>
				<html xmlns="facecat">
				  <head>
				  </head>
				  <body>
					<div dock="fill" type="tab" selectedindex="0">
					  <div name="TabPage" text="可视化生成" type="tabpage">
						<calendar name="Calendar" location="35,50" size="250,300" />
					  </div>
					  <div name="TabPage2" text="代码创建" type="tabpage" />
					</div>
				  </body>
				</html>
				`; 
				facecat.renderFaceCat(gPaint, xml);
				//获取第二页
				let tabPage = facecat.findViewByName("TabPage2", gPaint.views);
				let calendar = new facecat.FCCalendar();
				calendar.location = new facecat.FCPoint(100, 100);
				calendar.size = new facecat.FCSize(200, 300);
				facecat.addViewToParent(calendar, tabPage);
				facecat.initCalendar(calendar);
				calendar.selectedDay = facecat.getYear(calendar.years, 2022).months.get(10).days.get(1);
				facecat.updateCalendar(calendar);
		},
		methods: {  
		}
	}
</script>

<style>
</style>
